<template>
  <!-- 内容区域 -->
  <div class="main">
    <!-- 分左右两部分 -->
    <el-row :gutter="20">
      <!-- 左边博客显示区 -->
      <el-col :span="15" :offset="1">
        <el-card>
          <!-- 内容区域 -->
          <div>
            <!-- 内容头部 -->
            <el-row class="blog_main">
              <el-col :span="3" :offset="1"><h1>博客</h1></el-col>
              <el-col :span="4" :offset="16" class="blog_totle"
                >共<span class="totle"> {{ PageInfo.totle }} </span>篇</el-col
              >
            </el-row>
            <!-- 内容主体 -->
            <el-row>
              <el-col
                :span="20"
                :offset="2"
                class="blogs"
                v-for="(item, index) in Blogs"
                :key="index"
              >
                <!-- 博客标题 -->
                <div class="blog_title" @click="toDetail(item.id)">
                  {{ item.title }}
                </div>
                <!-- 博客简介 -->
                <div class="blog_content">
                  {{ item.intro }}
                  <el-image :src="item.imageUrl" :fit="ft"></el-image>
                </div>
                <!-- 博客信息 -->
                <div class="blog_user">
                  <el-row>
                    <el-col :span="5">
                      <el-avatar :src="item.user.iconUrl"></el-avatar>
                      <span class="blog_info blog_username">{{
                        item.user.nickName
                      }}</span>
                    </el-col>
                    <el-col :span="6">
                      <span class="blog_info">{{ item.createTime }}</span>
                    </el-col>
                    <el-col :span="3" :offset="9">
                      <span class="blog_info"
                        ><i class="el-icon-view"></i
                        >{{ " " + item.totle }}</span
                      >
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 分页 -->
          <div>
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="10"
              :total="PageInfo.totle"
              @current-change="handleCurrentPage"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
      <!-- 右边显示排行,分类和标签 -->
      <el-col :span="7">
        <!-- 排行 -->
        <el-card class="blog_top">
          <!-- 排行表格 -->
          <el-table
            :data="top"
            stripe
            style="width: 100%"
            @row-click="handelTop"
          >
            <el-table-column type="index" width="70" label="TOP 5">
            </el-table-column>
            <el-table-column prop="title"> </el-table-column>
          </el-table>
        </el-card>
        <!-- 分类 -->
        <el-card class="blog_sort">
          <!-- 分类表格 -->
          <el-table
            :data="sorts"
            stripe
            style="width: 100%"
            @row-click="handelSort"
          >
            <el-table-column prop="name" label="分类"> </el-table-column>
            <el-table-column width="80px">
              <template slot-scope="scope">
                <el-tag size="small">{{ scope.row.blogNum }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <!-- 标签 -->
        <el-card class="blog_tag">
          <h3>标签</h3>
          <div class="tags">
            <el-tag
              type="success"
              v-for="(label, index) in labels"
              :key="index"
              @click="toLabel(label.id)"
            >
              {{ label.name + " | " + label.blogNum }}
            </el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ft: "scale - down",
      top: [],
      Blogs: [],
      PageInfo: {},
      sorts: [],
      labels: [],
    };
  },
  methods: {
    handelTop(row) {
      this.toDetail(row.id);
    },
    handelSort(row) {
      this.$router.push("/h_sort/" + row.id);
    },
    toDetail(id) {
      this.$http.put("/blogTotle/" + id);
      this.$router.push("/h_detail/" + id);
    },
    async allBlogs(currentPage) {
      var d = await this.$http.get("blogs/" + currentPage);
      this.Blogs = d.data.blogs;
      this.PageInfo = d.data.pageInfo;
    },
    async topBlogs() {
      var d = await this.$http.get("blogTop");

      this.top = d.data;
    },
    async randSorts() {
      var d = await this.$http.get("randSorts");
      this.sorts = d.data;
    },
    async randLabels() {
      var d = await this.$http.get("randLabels");
      this.labels = d.data;
    },
    handleCurrentPage(page) {
      this.allBlogs(page);
    },
    toLabel(id) {
      this.$router.push("/h_tag/" + id);
    },
  },
  mounted: function () {
    this.allBlogs(1);
    this.topBlogs();
    this.randSorts();
    this.randLabels();
  },
};
</script>
<style scoped>
.blog_main {
  border-bottom: 1px solid #b8c0cc;
  margin-bottom: 50px;
}
.blog_totle {
  line-height: 32px;
  font-size: 1.2em;
}
.totle {
  font-size: 1.5em;
  color: red;
}
.blog_title {
  font-size: 1.2em;
  font-weight: 550;
  margin-bottom: 5px;
  cursor: pointer;
}
.blogs {
  margin-bottom: 25px;
  border-bottom: 1px solid #b8c0cc;
}
.blog_content {
  height: 100px;
  margin-bottom: 20px;
  line-height: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.el-image {
  margin-left: 15px;
  width: 150px;
  height: 100px;
  float: right;
}
.blog_username {
  display: inline-block;
  margin-left: 6px;
}
.blog_user {
  margin-bottom: 10px;
}

.blog_info {
  line-height: 40px;
  color: #b8c0cc;
}
.blog_sort h3,
.blog_tag h3 {
  border-bottom: 1px solid #b8c0cc;
}
.blog_sort ul {
  margin: 0px auto;
  width: 80%;
}
.blog_sort li {
  padding: 10px 0px;

  line-height: 20px;
  font-size: 14px;
  color: #606266;
}
.tags {
  width: 80%;
  margin: 10px auto;
}
.el-tag {
  margin: 10px 10px;
  cursor: pointer;
}
</style>